<script setup lang="ts">
import { computed, ref, onMounted } from 'vue'
import { useStore } from 'stores/store'
import { i18n } from 'boot/i18n'
import { updateLogs } from 'src/configs/updateLogs'
import { useRouter } from 'vue-router'
import { useQuasar } from 'quasar'

const store = useStore()
const router = useRouter()
const tc = i18n.global.tc
const $q = useQuasar()

// 控制drawer是否显示（仅在移动设备上使用）
const leftDrawerOpen = ref(false)

// the root layout of @cnic/server, load @cnic/server's  store here
console.log('@cnic/server store:', store.$state)

const activeItem = computed(() => store.items.currentPath[0])

// 计算用户是否为管理员
const isAdmin = computed(() => store.isUserAdmin)

const appName = process.env.appName as string
const appNameCn = process.env.appNameCn as string
const appPath = process.env.appPath as string
const releaseTime = process.env.releaseTime as string

const appVersion = updateLogs[0].version

// 跳转到信息页面
const goToInfo = () => {
  router.push(appPath + '/info')
}

// 跳转到预定会议页面
const goToBook = () => {
  router.push(appPath + '/book')
  if ($q.screen.lt.md) {
    leftDrawerOpen.value = false
  }
}

// 跳转到我的预定页面
const goToMyBookings = () => {
  router.push(appPath + '/my-bookings')
  if ($q.screen.lt.md) {
    leftDrawerOpen.value = false
  }
}

// // 跳转到个人设置页面
// const goToSettings = () => {
//   router.push(appPath + '/settings')
//   if ($q.screen.lt.md) {
//     leftDrawerOpen.value = false
//   }
// }

// 在组件挂载时加载用户信息
onMounted(async () => {
  try {
    await store.loadUserInfo()
    console.log('用户角色:', store.user.role)
  } catch (error) {
    console.error('加载用户信息失败:', error)
  }
})
</script>

<template>
  <q-layout view="hHh LpR fFf">
    <!-- 左侧导航栏 -->
    <q-drawer
      v-model="leftDrawerOpen"
      :breakpoint="$q.screen.lt.md ? 1024 : 0"
      :mini="$q.screen.lt.md"
      :width="$q.screen.lt.md ? 100 : 120"
      :mini-width="$q.screen.lt.md ? 100 : 120"
      :style="$q.screen.lt.md ? '' : 'padding-top: 60px;'"
      side="left"
      bordered
      show-if-above
      :behavior="$q.screen.lt.md ? 'mobile' : 'desktop'"
    >
      <div class="column full-height bg-grey-2">
        <q-scroll-area class="col non-selectable" visible>
          <q-list>
            <!-- 页面标题 -->
            <q-item>
              <q-item-section class="column items-center q-py-sm text-center text-weight-bold text-grey-8">
                {{ tc('科技云会') }}
              </q-item-section>
            </q-item>

            <!-- 用户视图导航 -->
            <!-- 预定会议按钮 -->
            <q-item
              clickable
              :active="activeItem === 'book'"
              :to="appPath + '/book'"
              exact
              active-class="active-item"
            >
              <q-item-section class="column items-center">
                <q-icon name="event_available" size="lg"/>
                <div class="active-text text-center">{{ tc('预定会议') }}</div>
              </q-item-section>
            </q-item>

            <!-- 我的预定按钮 -->
            <q-item
              clickable
              :active="activeItem === 'my-bookings'"
              :to="appPath + '/my-bookings'"
              exact
              active-class="active-item"

            >
              <q-item-section class="column items-center">
                <q-icon name="calendar_today" size="lg"/>
                <div class="active-text text-center">{{ tc('我的预定') }}</div>
              </q-item-section>
            </q-item>

            <!-- 个人设置按钮 -->
            <q-item
              clickable
              :active="activeItem === 'settings'"
              :to="appPath + '/settings'"
              exact
              active-class="active-item"

            >
              <q-item-section class="column items-center">
                <q-icon name="settings" size="lg"/>
                <div class="active-text text-center">{{ tc('个人设置') }}</div>
              </q-item-section>
            </q-item>

            <!-- 帮助指南按钮 -->
            <q-item
              clickable
              :active="activeItem === 'help'"
              :to="appPath + '/help'"
              exact
              active-class="active-item"

            >
              <q-item-section class="column items-center">
                <q-icon name="help_outline" size="lg"/>
                <div class="active-text text-center">{{ tc('帮助/指南') }}</div>
              </q-item-section>
            </q-item>

            <!-- 管理员功能区域 - 只对管理员显示 -->
            <template v-if="isAdmin">
              <!-- 管理员功能分隔线 -->
              <q-separator class="q-my-md"/>
              <q-item>
                <q-item-section class="column items-center text-center text-weight-bold text-grey-8">
                  {{ tc('管理功能') }}
                </q-item-section>
              </q-item>

              <!-- 管理员视图导航 -->
              <!-- 仪表盘按钮 -->
              <q-item
                clickable
                :active="activeItem === 'dashboard'"
                :to="appPath + '/dashboard'"
                exact
                active-class="active-item"
              >
                <q-item-section class="column items-center">
                  <q-icon name="dashboard" size="lg"/>
                  <div class="active-text text-center">{{ tc('仪表盘') }}</div>
                </q-item-section>
              </q-item>

              <!-- 会议管理按钮 -->
              <q-item
                clickable
                :active="activeItem === 'reservations'"
                :to="appPath + '/reservations'"
                exact
                active-class="active-item"
              >
                <q-item-section class="column items-center">
                  <q-icon name="event_note" size="lg"/>
                  <div class="active-text text-center">{{ tc('预定管理') }}</div>
                </q-item-section>
              </q-item>

              <!-- 用户管理按钮 -->
              <q-item
                clickable
                :active="activeItem === 'users'"
                :to="appPath + '/users'"
                exact
                active-class="active-item"

              >
                <q-item-section class="column items-center">
                  <q-icon name="people" size="lg"/>
                  <div class="active-text text-center">{{ tc('用户管理') }}</div>
                </q-item-section>
              </q-item>

              <!-- 角色管理按钮 -->
              <!-- <q-item
                clickable
                :active="activeItem === 'roles'"
                :to="appPath + '/roles'"
                exact
                active-class="active-item"

              >
                <q-item-section class="column items-center">
                  <q-icon name="assignment_ind" size="lg"/>
                  <div class="active-text text-center">{{ tc('角色管理') }}</div>
                </q-item-section>
              </q-item> -->

              <!-- 分组管理按钮 -->
              <!-- <q-item
                clickable
                :active="activeItem === 'groups'"
                :to="appPath + '/groups'"
                exact
                active-class="active-item"

              >
                <q-item-section class="column items-center">
                  <q-icon name="group_work" size="lg"/>
                  <div class="active-text text-center">{{ tc('分组管理') }}</div>
                </q-item-section>
              </q-item> -->

              <!-- 系统设置按钮 -->
              <q-item
                clickable
                :active="activeItem === 'system'"
                :to="appPath + '/system'"
                exact
                active-class="active-item"

              >
                <q-item-section class="column items-center">
                  <q-icon name="tune" size="lg"/>
                  <div class="active-text text-center">{{ tc('系统设置') }}</div>
                </q-item-section>
              </q-item>
            </template>
          </q-list>

          <div class="row justify-center q-pt-lg">
            <q-icon class="text-center cursor-pointer"
                    name="info"
                    size="xs"
                    :color="activeItem === 'info' ? 'primary' : 'grey-4'"
                    @click="goToInfo">
              <q-tooltip class="bg-grey-3">
                <div class="text-grey text-caption text-center">
                  {{ i18n.global.locale === 'zh-CN' ? appNameCn : appName }}
                </div>
                <div class="text-grey text-caption text-center">
                  {{ appVersion }}
                </div>

                <div class="column text-grey text-caption text-center">
                  <div v-if="i18n.global.locale === 'zh-CN'">
                    <div>{{
                        new Date(releaseTime).toLocaleString(i18n.global.locale as string).split(' ')[0]
                      }}
                    </div>
                    <div>{{
                        new Date(releaseTime).toLocaleString(i18n.global.locale as string).split(' ')[1]
                      }}
                    </div>
                  </div>

                  <div v-else>
                    <div>{{
                        new Date(releaseTime).toLocaleString(i18n.global.locale as string).split(',')[0]
                      }}
                    </div>
                    <div>{{
                        new Date(releaseTime).toLocaleString(i18n.global.locale as string).split(',')[1]
                      }}
                    </div>
                  </div>
                </div>
              </q-tooltip>
            </q-icon>
          </div>

        </q-scroll-area>

        <q-separator color="grey-3"/>

        <div class="col-auto column items-center justify-center q-my-xs">
          <a href="https://yunkun.cstcloud.cn" target="_blank" style="text-decoration: none;">
            <img v-if="i18n.global.locale === 'zh-CN'"
                 class="col-auto"
                 src="..\assets\svg\logo_yunkun_horizontal_cn.svg"
                 style="height: 25px;"/>

            <img v-else
                 class="col-auto"
                 src="..\assets\svg\logo_yunkun_horizontal_en.svg"
                 style="height: 25px;"/>

            <div class="col-auto row justify-center items-center text-grey" style="font-size: 10px; line-height: 1;">
              <div class="col-auto">
                {{ tc('云坤系统提供支持') }}
              </div>
            </div>
          </a>
        </div>

      </div>
    </q-drawer>

    <q-page-container>
      <q-page :style="$q.screen.lt.md ? 'padding-bottom: 100px' : ''">
        <router-view :key="$route.fullPath"/>
      </q-page>
    </q-page-container>

    <!-- 移动设备底部导航栏 -->
    <q-footer v-if="$q.screen.lt.md" bordered class="bg-white text-primary shadow-9">
      <q-tabs breakpoint="0" align="center" no-caps class="q-pt-xs ">

        <!-- 我的预定按钮 -->
        <q-btn flat dense
               icon="event_note"
               :color="activeItem === 'my-bookings' ? 'primary' : 'grey-7'"
               @click="goToMyBookings">
          {{ tc('我的预定') }}
        </q-btn>

        <!-- 预定会议突出按钮 -->
        <q-btn flat dense
               icon="add_circle"
               :color="activeItem === 'book' ? 'primary' : 'grey-7'"
               @click="goToBook">
          {{ tc('预定会议') }}
        </q-btn>

        <!-- 控制抽屉按钮 -->
        <q-btn flat dense
               icon="menu"
               @click="leftDrawerOpen = !leftDrawerOpen"
               color="grey"
        >
          {{ tc('菜单') }}
        </q-btn>

      </q-tabs>
    </q-footer>
  </q-layout>
</template>

<style lang="scss" scoped>
.active-item {
  background-color: #DBF0FC; // $grey-4;

  .active-text {
    color: $primary;
  }
}

.mini-hide {
  display: none;
}
</style>
